<script setup lang="ts">
import CdlDescriptions from "@/components/descriptions";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {Accident} from "@/interfaces/views/vehicle/accident";
import {useAccidentInfoApi} from "@/api/vehicle/accident";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicData = ref({})
const basicDescriptionsTree: DescriptionsTree<Accident> = [
  {label: "车牌号", prop: "licensePlate"},
  {label: "司机", prop: "driverName"},
  {label: "事故/违章类型", prop: "type", dict: "accident_type"},
  {label: "发生时间", prop: "occurrenceTime"},
  {label: "司机承担金额", prop: "costByDriver"},
  {label: "公司承担金额", prop: "costByCompany"},
  {label: "保险承担金额", prop: "costByInsurance"},
  {label: "对方承担金额", prop: "costByOpposite"},
  {label: "罚分", prop: "punish"},
  {label: "地点", prop: "location"},
  {label: "事故认定/处罚描述", prop: "officialConclusion"},
  {label: "保险公司", prop: "insuranceCompany"}
]

/**
 * 初始化数据
 */
function initData(){
  useAccidentInfoApi(route.query.id as string).then(res => {
    basicData.value = res.data
  });
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </div>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="basicData" :template-tree="basicDescriptionsTree"></CdlDescriptions>
  </el-card>
</template>
